<!-- 所有打球卡列表 -->
<template>
	<view class="vip-card-list page-background">
		<view v-for="(obj, idx) in clubList" :key="idx" class="club-item">
			<view class="club-title flex-box">
				<image src="@/static/images/icon-vipcard-club.png" mode=""></image>
				<view class="club-name">
					{{obj.clubName}}
				</view>
			</view>
			<view v-for="(item, index) in obj.cardList" :key="index" class="card-item">
				<view class="top">
					<view class="icon">
						<image src="@/static/images/icon-vipcard.png" mode=""></image>
					</view>
					<view class="title line-clamp-2">
						{{item.title}}
					</view>
				</view>
				<view class="bottom flex-box">
					<view class="bottom-left">
						<text class="price-text">面额：</text>￥<text class="price">{{item.store | floorTwo}}</text>
					</view>
					<view @click="payorder(item)" class="recharge-btn flex-box">
						<view class="btn-price">
							￥<text>{{item.cost | floorTwo}}</text>
						</view>
						<view class="btn-text">
							购买
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				clubList: [],
				pageLoaded: false,
				ONOFF:true,
				cost:''
			};
	    },
	  onLoad(data) {
			this.getVipCardList()
	  },
		onShow() {
			
		},
		computed:{
			...mapState(['userInfo','accessToken']),
		},
	  methods:{
			async getVipCardList(){
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.getClubVipCardAll(param)
				if(res && res.code == 200) {
					this.clubList = res.data
				}
			},
			payorder(item) {
				console.log('dddd',item,this.ONOFF)
				if (this.ONOFF) {
					this.ONOFF = false;
					let data = {};
					this.cost = item.cost
						data = {
							"ACCESS-TOKEN": this.accessToken,
							cardId: item.id,
							cost: item.store,
							amount: item.cost, //实际要支付的钱
							type: "3",
							playerId: "",
							points: "0", //积分
							isToken: "0",
							// playerSkillLevel:this.userInfo.playerSkillLevel,
						};
						console.log(data)
						this.createOrder(data);
				}
    	},
			createOrder(data) {
				this.$api.createOrder(data).then(res => {
					if (res && res.code == "200") {
						this.payId = res.data.id
						if(this.cost==0 || this.cost==0.00 || this.cost==0.0){
							uni.reLaunch({
								url: `/mainProcess/confirmOrder/payResult?id=${res.data.id}&type=vip`
							})
						}else{
							uni.navigateTo({
								url: `/mainProcess/confirmOrder/payType?id=${res.data.id}`
							});
							this.ONOFF = true;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
						this.ONOFF = true;
					}
					
				});
			},
	    toBuy(id){
				uni.navigateTo({
					url: `/mainProcess/confirmOrder/confirmOrder?id=${id}&type=vip`
				})
			}
	    }
	}
</script>

<style scoped lang="scss">
	.vip-card-list{
		padding-top: 20rpx;
		min-height: 100vh;
		.club-item{
			background-color: white;
			padding-bottom: 20rpx;
			margin-bottom: 15rpx;
			.club-title{
				padding: 18rpx 28rpx;
				align-items: center;
				justify-content: flex-start;
				image{
					width: 47rpx;
					height: 46rpx;
					vertical-align: middle;
					margin-right: 14rpx;
				}
				.club-name{
					width: 610rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
			.card-item{
				height: 274rpx;
				width: 738rpx;
				padding: 35rpx 35rpx 40rpx;
				margin: 0 auto 8rpx;
				background: url($public-baseImgUrl+'mine/vipcard-bg.png') center no-repeat;
				background-size: 100% 100%;
				position: relative;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				.top{
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					position: relative;
					.icon{
						margin-right: 20rpx;
						overflow: hidden;
						// background-color: #F2F2F2;
						image{
							width: 48rpx;
							height: 36rpx;
							vertical-align: middle;
						}
					}
					.title{
						color: #FFFFFF;
						line-height: 36rpx;
						max-width: 584rpx;
						flex: 1 0 auto;
					}
				}
				.bottom{
					justify-content: space-between;
					margin-top: 20rpx;
					align-items: center;
					padding-left: 68rpx;
					.bottom-left{
						color: #FFF;
						font-size: 24rpx;
						.price-text{
							color: #96C2FC;
						}
						.price{
							font-size: 42rpx;
							line-height: 42rpx;
						}
					}
					.recharge-btn{
						padding: 0 30rpx;
						height: 72rpx;
						border-radius: 34rpx;
						justify-content: center;
						align-items: center;
						background-color: #226ED4;
						color: white;
						border-radius: 36rpx;
						.btn-price{
							margin-right: 15rpx;
							font-size: 24rpx;
							text{
								font-size: 30rpx;
							}
						}
						.btn-text{
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>
